View.vue
<template>
  <h1>个人简历练习</h1>
  <table border="1px" style="margin: auto">
    <tr >
      <td>图片：</td>
      <td><img :src="person.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr >
      <td>好友：</td>
      <td>
        <ul><li v-for="item in person.friends">{{item}}</li></ul>
      </td>
    </tr>
  </table>
  <br><br>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>
  import {ref} from "vue";

  const person = ref({imgUrl:'',name:'',age:'',friends:''});

  const loadData = () => {
    person.value= {
      imgUrl:'fcq.jpg',
      name:'范传奇',
      age:18,
      friends:['张三','李四','王二','陈大']
    };
  };

</script>

<style scoped>

</style>